<template>
  <div>
    <detail-header></detail-header>
    <detail-info
      :tit="tit"
      :rating="rating"
      :favoriteCount="favoriteCount"
      :genres="genres"
      :videoUrls="videoUrls"
      :countries="countries"
      :durationMin="durationMin"
      :releaseDates="releaseDates"
      :description="description"
      :coverUrl="coverUrl"
    >
    </detail-info>
    <detail-actors
      :actors="actors"
    >
    </detail-actors>
  </div>
</template>

<script>
import DetailInfo from './components/Info'
import DetailActors from './components/Actors'
import DetailHeader from './components/Header'
import axios from 'axios'
let detailUrl = '/detail/movie/douban'
export default {
  name: 'Detail',
  components: {
    DetailInfo,
    DetailActors,
    DetailHeader
  },
  data () {
    return {
      tit: '',
      coverUrl: '',
      rating: 0,
      favoriteCount: 0,
      genres: [],
      countries: [],
      durationMin: 0,
      releaseDates: [],
      description: '',
      videoUrls: [],
      actors: []
    }
  },
  methods: {
    getDetailInfo () {
      axios.get(detailUrl, {
        emulateJSON: true,
        params: {
          id: this.$route.params.id,
          apikey: 'JTDTnqbxoqDaJRNuMDiOHJGetRrjHGVInn4nQBYbYgDF2nzMNbfnwUgcZqKFNAo0'
        }
      }).then(this.getDetailSucc)
    },
    getDetailSucc (res) {
      res = res.data
      if (res && res.data.length > 0) {
        const data = res.data
        this.tit = data[0].title
        this.coverUrl = data[0].coverUrl
        this.rating = data[0].rating
        this.favoriteCount = data[0].favoriteCount
        this.genres = data[0].genres
        this.countries = data[0].countries
        this.durationMin = data[0].durationMin
        this.releaseDates = data[0].releaseDates
        this.description = data[0].description
        this.videoUrls = data[0].videoUrls
      }
    },
    getActors () {
      axios.get('/api/movie/subject/' + this.$route.params.id).then(this.getActorsSucc)
    },
    getActorsSucc (res) {
      if (res && res.status === 200) {
        const data = res.data
        this.actors = data.casts
      }
    }
  },
  mounted () {
    this.bus.$emit('loading', true)
    this.getDetailInfo()
    this.getActors()
    this.bus.$emit('loading', false)
  }
}
</script>

<style scoped lang="stylus">
</style>
